<template>
  <el-dialog title="创建节目" width="600"  v-model="isVisible" @close="onCancelModel" append-to-body>
    <div class="yy-template-create">
       <div class="yy-template-create_item yy-template-create_file" @click="onCreateTemplateByDuration">
         <span class="yy-template-create_item-icon"><el-icon><DocumentAdd /></el-icon></span>
         <span>轮播节目</span>
       </div>
      <div class="yy-template-create_item yy-template-create_file" @click="onCreateTemplateByTime">
        <span class="yy-template-create_item-icon"><el-icon><DocumentAdd /></el-icon></span>
        <span>时段节目</span>
      </div>
      <div class="yy-template-create_item yy-template-create_editor" @click="onCreateTemplateByEditor">
        <span class="yy-template-create_item-icon"><el-icon><Monitor /></el-icon></span>
        <span>编辑器</span>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {defineExpose, nextTick, ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()
const isVisible = ref(false)

const $emit = defineEmits({
  operatorCallback:(type) => type
})
const onShowDialog = (data: Record<string, any>) => {
  isVisible.value = true
}

const onCreateTemplateByDuration = () => {
  onCancelModel()
  $emit('operatorCallback', 'duration')
}

const onCreateTemplateByTime = () => {
  onCancelModel()
  $emit('operatorCallback', 'time')
}

const onCreateTemplateByEditor = () => {
  onCancelModel()
  $emit('operatorCallback', 'editor')
}

const onCancelModel = () => {
  isVisible.value = false
}


defineExpose({
  onShowDialog
})
</script>
<style scoped lang="scss">
  .yy-template-create {
    width: 100%;
    height: 100%;
    border: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15px 15px 30px;
    &_item {
      flex: 1;
      justify-content: center;
      align-items: center;
      display: inline-flex;
      padding: 30px 15px;
      margin: 0 10px;
      background: #f1f1f1;
      font-size: 24px;
      border-radius: 4px;
      cursor: pointer;
      &:hover {
        background: #409EFF;
        color: #fff;
      }
      &-icon {
        position: relative;
        top: 3px;
        margin-right: 3px;
      }
    }
  }
</style>